import React,{Component} from "react"
import {withRouter} from "react-router-dom";
import "../../styles/find/find.css"
import { Icon, Grid ,List} from 'antd-mobile';
<<<<<<< HEAD
import {getSearch} from "../../api/index.js"
=======
import {getSearch} from "../../api"
>>>>>>> 4584f54eb3ca1bca8f1f1d9d93d2148773cee257
import fangdajing from "../../assets/search.png"

const Item = List.Item;


class Find extends Component{
    constructor(){
        super() 
        this.state={
            val:"",
            lists:[]
        }
    }
    handler(e){
        this.setState({
            val:e.target.value
        })
        if(this.state.val==""){
            this.setState({lists:[]})

    }else{
        getSearch(this.state.val).then(res=>{
                
            let newArr=[]
            res.data.result.songs.forEach(res=>{
                console.log(res)
                newArr.push(res)   
            })
            this.setState({lists:newArr})
        })
    }
     
    }

    Back(props){
        console.log(props)
    }
    
    render(){
        let {lists}=this.state 
        return(
            <div>
                <Icon type="left" size="lg" id="back" onClick={this.Back.bind(this)}></Icon>
                <input type="text" value={this.state.val} onChange={this.handler.bind(this)}></input>  
                <div className="items">
                        {lists.map(({name})=>{
                        
                        return <Item
                            arrow="horizontal"
                            thumb={fangdajing}
                            
                            onClick={() => {}}
                            id="items"
                                            >
                            {name}
                            </Item>

                        })}

                </div> 
               
            </div>
        )
    }
}

export default withRouter(Find)